<app-content-header
  [search]="search">
  <ng-template #search>
    <app-search [(data)]="searchSchema" [customItems]="customSchema" (bindSearch)="handleSearch()"></app-search>
  </ng-template>
</app-content-header>

<div class="cil-table-block">
  <st
    #st
    [scroll]="scroll"
    [data]="data"
    [columns]="columns"
    [widthMode]="widthMode"
    [ps]="ps"
    [pi]="pi"
    [page]="stPage"
    [total]="total"
    [loading]="loading"
    (change)="onChange($event)">
    <ng-template st-row="transScene" let-item>
      <ng-container *ngIf="item.transScene">
        <span>{{ item.transScene | i18nPrefixWith: 'TRANS_SCENE.' }}</span>
      </ng-container>
    </ng-template>

    <ng-template st-row="transChannel" let-item>
      <span>{{ item.paymentBrand | uppercase | i18nChanCode }}</span>
    </ng-template>

    <ng-template st-row="transAmt" let-item>
      <span>{{ computeTransAmt(item) | amtFormat:item.currency | async }}</span>
    </ng-template>
  </st>
  <div *ngIf="!loading && data.length > 0" #btns class="cil-custom-btns">
    <button
      acl [acl-ability]="'api.get.camel.trades.report'"
      class="cil__custom-btn__lightblue"
      nz-button
      nzType="primary"
      nzShape="round"
      nzSize="default"
      (click)="download()">
      <i nz-icon type="download"></i>
      {{'BTN.EXPORT' | i18n}}
    </button>
  </div>
</div>

<ng-template #insTpl>
  <app-aams-select
    level="institution"
    [(ngModel)]="selectedAcquirer"
    [disabled]="isAcquirerUser"
    (valueChange)="aamsChangeHandler($event)"></app-aams-select>
</ng-template>

<ng-template #agentTpl>
  <app-aams-select
    level="agent"
    [insCode]="selectedAcquirer ? selectedAcquirer.code : ''"
    [(ngModel)]="selectedGroup"
    [disabled]="isAgentUser"
    (valueChange)="aamsChangeHandler($event)"></app-aams-select>
</ng-template>

<ng-template #merchantTpl>
  <app-aams-select
    level="merchant"
    [insCode]="selectedAcquirer ? selectedAcquirer.code : ''"
    [agentCode]="selectedGroup ? selectedGroup.code : ''"
    [(ngModel)]="selectedMerchant"
    [disabled]="isMerchantUser"
    (valueChange)="aamsChangeHandler($event)"></app-aams-select>
</ng-template>

<ng-template #storeTpl>
  <app-aams-select
    level="store"
    [insCode]="selectedAcquirer ? selectedAcquirer.code : ''"
    [agentCode]="selectedGroup ? selectedGroup.code : ''"
    [intMerCode]="selectedMerchant ? selectedMerchant.code : ''"
    [(ngModel)]="selectedStore"
    [disabled]="isStoreUser"
    (valueChange)="aamsChangeHandler($event)"></app-aams-select>
</ng-template>

<ng-template #transAmt>
  <nz-input-group>
    <div nz-col nzSpan="10">
      <nz-input-number
        [style.width]="'100%'"
        [ngModel]="transAmtFrom"
        (ngModelChange)="transAmtFrom=$event;validateTransAmt()"
        [nzMin]="0"
        [nzPrecision]='0'>
      </nz-input-number>
    </div>
    <div nz-col nzSpan="4" class="cil__trans-amt-split">
      <div>——</div>
    </div>
    <div nz-col nzSpan="10">
      <nz-input-number
        [style.width]="'100%'"
        [ngModel]="transAmtTo"
        (ngModelChange)="transAmtTo=$event;validateTransAmt()"
        [nzMin]="0"
        [nzPrecision]='0'>
      </nz-input-number>
    </div>
  </nz-input-group>
</ng-template>

<!--
<ng-template #tplChanMer>
  <app-channel-merchant-select [(ngModel)]="selectedChannelMerchant"></app-channel-merchant-select>
</ng-template>
-->

<ng-template #tplCurrency>
  <app-currency-select [(ngModel)]="selectedCurrency"></app-currency-select>
</ng-template>

<ng-template #tplTransScene>
  <nz-select
    [(ngModel)]="selectedTransScene"
    nzShowSearch
    [nzAllowClear]="true"
  >
    <nz-option *ngFor="let o of transSceneOptions" [nzLabel]="o.label" [nzValue]="o.value"></nz-option>
  </nz-select>
</ng-template>

<ng-template #tplChannel>
  <nz-select
    [(ngModel)]="selectedChannel"
  >
    <nz-option *ngFor="let item of channelOptions$ | async" [nzLabel]="item.label" [nzValue]="item.value"></nz-option>
  </nz-select>
</ng-template>